<template>
  <div>
    <ModuleHeader></ModuleHeader>
    <div class="asset-page">
      <div class="asset-left">
        <div class="title-box card">
          <img class="icon" src="" alt /> 我的资产
        </div>
        <router-link to="/user/asset/asset">
          <div
            class="list-card card"
            @click="pageClick('asset')"
            :class="currentPage=='asset'?'current-card':''"
          >我的资产</div>
        </router-link>
        <router-link to="/user/asset/charge">
          <div
            class="list-card card"
            @click="pageClick('charge')"
            :class="currentPage=='charge'?'current-card':''"
          >充币</div>
        </router-link>
        <router-link to="/user/asset/mention">
          <div
            class="list-card card"
            @click="pageClick('mention')"
            :class="currentPage=='mention'?'current-card':''"
          >提币</div>
        </router-link>
        <router-link to="/user/asset/transfer">
          <div
            class="list-card card"
            @click="pageClick('transfer')"
            :class="currentPage=='transfer'?'current-card':''"
          >划转</div>
        </router-link>
        <div class="title-box card">
          <img class="icon" src="" alt />交易账户
        </div>

        <router-link to="/user/asset/cec">
          <div
            class="list-card card"
            @click="pageClick('cec')"
            :class="currentPage=='cec'?'current-card':''"
          >币币账户</div>
        </router-link>
        <router-link to="/user/asset/otc">
          <div
            class="list-card card"
            @click="pageClick('otc')"
            :class="currentPage=='otc'?'current-card':''"
          >法币账户</div>
        </router-link>
      </div>
      <div class="asset-right">
        <component :is="currentPage"></component>
      </div>
    </div>
    <ModuleFooter></ModuleFooter>
  </div>
</template>
<script>
import ModuleHeader from "../page-module-public/public-header.vue";
import ModuleFooter from "../page-module-public/public-footer.vue";
import asset from "./module/user-asset";
import charge from "./module/user-charge";
import mention from "./module/user-mention";
import transfer from "./module/user-transfer";
import cec from "./module/user-cec";
import otc from "./module/user-otc";
export default {
  data() {
    return {
      currentPage: "asset"
    };
  },
  components: {
    ModuleHeader,
    ModuleFooter,
    asset,
    charge,
    mention,
    transfer,
    cec,
    otc
  },
  methods: {
    pageClick(val) {
      this.currentPage = val;
    },
    dealRouter() {
      let tag = this.$route.params.tag;
      if (tag) {
        this.currentPage = tag;
        console.log(tag);
      }
    }
  },

  computed: {},
  created() {
    this.dealRouter();
  },

  mounted() {},
  /*
   *路由数据变化的监听
   */
  watch: {
    $route(to, from) {
      let tag = this.$route.params.tag;
      if (tag) {
        this.currentPage = tag;
        console.log(tag);
      }
    }
  }
};
</script>
<style scoped>
.asset-page {
  width: 1200px;
  margin: 60px auto 0 auto;
  min-height: calc(100vh - 395px);
  display: flex;
  padding-top: 30px;
}
.asset-left {
  border: solid 1px #eaeaea;
  border-radius: 4px;
  width: 198px;
  height: 440px;
}
.card {
  height: 50px;
  line-height: 50px;
  font-size: 16px;
  font-weight: 400;
}
.title-box .icon {
  width: 14px;
  height: 14px;
  margin: 0 9px 0 27px;
}
.title-box {
  display: flex;
  align-items: center;
  color: #999;
  font-size: 12px;
}
.list-card {
  padding-left: 50px;
  color: #585757;
  cursor: pointer;
}
.current-card {
  /* background-image: url("../../../../public/image/asset_current.png"); */
  background-size: 198px 50px;
  color: #31c0ce;
  background-position: 50% 50%;
}
.asset-right {
  padding-left: 28px;
}
.asset-right >>> .user-title {
  line-height: 58px;
  border-bottom: solid 1px #eaeaea;
  font-size: 24px;
  font-weight: 500;
  color: rgba(51, 51, 51, 1);
  padding-left: 12px;
}
.asset-right >>> .component-page {
  width: 960px;
  min-height: 800px;
}
</style>
